<template>
	<div>
		<div class="h2"> 年审列表</div>
		<div id="components-form-demo-advanced-search">
			<a-form class="ant-advanced-search-form home-form" :form="form" @submit="handleSearch">
				<a-row :gutter="24">
					<a-col :span="8">
						<a-form-item label="名称">
							<a-input autocomplete="off" class="field-right" placeholder="请输入名称搜索"
								v-decorator="[`key`]" />
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="状态">
							<a-select allowClear placeholder="请先选择状态" v-decorator="[`state`]">
								<template v-for="(item, index) in StateData">
									<a-select-option :key="item.ID">{{ item.Name }}</a-select-option>
								</template>
							</a-select>
						</a-form-item>
					</a-col>

					<a-col :span="8" style="margin-top: -6px;">
						<a-button-group size="default" class="option">
							<a-button type="primary" @click="handleSearch">搜索</a-button>
							<a-button @click="handleReset">重置</a-button>
							<a-button type="primary" class="btn" @click="allApplyHander">批量审核</a-button>
						</a-button-group>
					</a-col>
				</a-row>
			</a-form>
		</div>

		<div>
			<el-table ref="tableList" :data="data" v-loading="loading" border :max-height="tableHeight"
				highlight-current-row style="width: 100%;" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" fixed="left"></el-table-column>
				<el-table-column type="index" label="序号" width="60"></el-table-column>
				<el-table-column prop="ClubName" label="组织名称" min-width="120"></el-table-column>
				<el-table-column prop="ChairmanNo" label="组织负责人" min-width="150">
					<template slot-scope="scope">
						<a-tag color="blue">
							{{scope.row.ChairmanNo}}/{{scope.row.ChairmanName}}
						</a-tag>
					</template>
				</el-table-column>
				<el-table-column prop="IsAgreeUpdate" label="申请时间" min-width="200">
					<template slot-scope="scope">
						{{scope.row.ApplyStartTime}}-{{scope.row.ApplyEndTime}}
					</template>
				</el-table-column>
				<el-table-column prop="IsEnable" label="状态" min-width="130" align="center">
					<template slot-scope="scope">
						<a-tag
							:color="scope.row.State==1?'red':scope.row.State==2?'#ff7f27':scope.row.State==0?'blue':scope.row.State==3?'green':'blue'">
							{{ scope.row.State==0?'待申报':scope.row.State==1?'待审核':scope.row.State==2?'审核不通过':scope.row.State==3?'审核通过':'' }}
						</a-tag>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="Content" label="描述" min-width="130" show-overflow-tooltip> -->

				</el-table-column>
				<el-table-column label="操作" width="100" fixed="right">
					<template slot-scope="scope">
						<a-tooltip placement="top">
							<template slot="title">修改状态</template>
							<i title="修改状态" class="iconfont icon-editor1" style="color: #1890FF;"
								@click="modifyList(scope.row, 'modify')"></i>
						</a-tooltip>
						<a-tooltip placement="top" v-if="scope.row.ApplyRecordID">
							<template slot="title">详情</template>
							<i title="详情" class="iconfont icon-xiangqing" style="color: #1890FF;"
								@click="detail(scope.row)"></i>
						</a-tooltip>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<add :text="text" v-show="addIf" @closeFun="closeFun"></add>
		<detail :text="text" v-show="detailIf" :currentType="currentType" @closeFun="closeFun"></detail>

	</div>
</template>

<script>
	import add from './add';
	import Func from '@/utils/func';
	import moment from 'moment';
	import detail from '@components/views/ClubAnnualAuditSp/detail.vue';
	import Cache from '@/utils/cache';
	import {
		ManageClubClubAnnualAuditDoGetPageList,
		ManageClubClubAnnualAuditGetPageList,
		ManageCreditSessionDoDelete,
		ManageClubAnnualAuditDoCopy,
		ManageClubAnnualAuditDoSetEnable,
		ManageClubAnnualAuditDoDelete
	} from '@/api/follow';
	const data = [];
	export default {
		components: {
			add,
			detail
		},
		data() {
			return {
				currentType: 'teamDetail',
				detailIf: false,
				StateData: [{
						ID: '0',
						Name: '待申报'
					},
					{
						ID: '1',
						Name: '待审核'
					},
					{
						ID: '2',
						Name: '审核不通过'
					},
					{
						ID: '3',
						Name: '审核通过'
					}

				],
				data,
				form: this.$form.createForm(this, {
					name: 'advanced_search'
				}),
				addIf: false,
				text: {},
				loading: false,
				values: {},
				tableHeight: parseFloat(window.innerHeight - 160),
				requestUrl: this.global.requestUrl,
				token: Cache.get('token'),
				multipleSelection: []
			};
		},
		computed: {},
		created() {
			this.getList();
		},
		mounted() {},
		methods: {
			handleSelectionChange(val) {
				console.log(val)
				this.multipleSelection = val;
			},
			allApplyHander() {
				if (this.multipleSelection.length == 0) {
					this.$message.error('请选择要处理的数据！')
					return false
				}
				this.seeList({
					ID: this.multipleSelection.map((item) => {
						return item.ID
					}).join(','),
					textArr: this.multipleSelection
				}, 4)
			},
			seeList(text, listType) {
				this.text = {
					...text,
					listType: listType
				};
				console.log(this.text)
				this.addIf = !this.addIf;
			},
			moment,
			handleSearch(e) {
				e.preventDefault();
				this.form.validateFields((error, values) => {
					this.values = values;
					this.getList();
				});
			},
			nextPage(text, name) {
				this.$router.push({
					name: name,
					query: {
						ID: text.ID,
						Name: text.Name,
						clubAnnualAuditID: text.ID
					}
				});
			},
			handleReset() {
				this.form.resetFields();
				this.values = {};
				this.getList();
			},
			async getList() {
				this.loading = true;
				let data = {};
				if (this.values) {
					data = this.values;
				}
				data.clubAnnualAuditID = this.$route.query.ID;
				let res = await ManageClubClubAnnualAuditGetPageList(data);
				this.loading = false;
				this.data = res.data.data;
				this.$refs.tableList.bodyWrapper.scrollTop = 0;
			},
			addList() {
				this.text = {};
				this.addIf = !this.addIf;
			},
			detail(text) {
				text = {
					...text,
					time: new Date(),
					btnType: 'detail'
				}
				this.detailIf = !this.detailIf;
				this.text = text;
			},
			modifyList(text) {
				text = {
					...text,
					time: new Date()
				}
				this.addIf = !this.addIf;
				this.text = text;
			},
			isNowFun(text) {
				let that = this;
				let content = '是否克隆此数据?';
				this.$confirm({
					title: '提示',
					content: content,
					okText: '确认',
					cancelText: '取消',
					async onOk() {
						let data = {};
						data.id = text.ID;
						let res = await ManageClubAnnualAuditDoCopy(data);
						if (res.data.code == 0) {
							that.getList();
							that.$message.success(res.data.msg);
						} else {
							that.$message.error(res.data.msg);
						}
					}
				});
			},
			deleteList(text, type) {
				let that = this;
				let content = '';
				switch (type) {
					case 1:
						content = '您确定删除该数据吗?';
						break;
					case 2:
						content = '您确定停用/启用当前数据吗?';
						break;
					default:
						break;
				}
				this.$confirm({
					title: '提示',
					content: content,
					okText: '确认',
					cancelText: '取消',
					async onOk() {
						let data = {};
						data.id = text.ID;
						let res = {}
						res = type == 1 ? await ManageClubAnnualAuditDoDelete(data) :
							await ManageClubAnnualAuditDoSetEnable(data);
						if (res.data.code == 0) {
							that.getList();
							that.$message.success(res.data.msg);
						} else {
							that.$message.error(res.data.msg);
						}
					}
				});
			},
			closeFun(data) {
				this.detailIf = false;
				this.addIf = false;
				if (data == 1) {
					this.getList();
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	.home-form /deep/.ant-form-item {
		display: flex;
		margin-bottom: 10px !important;
	}

	.home-form /deep/.ant-form-item-label {
		width: 80px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: right;
	}

	.home-form /deep/.ant-form-item-control-wrapper {
		flex: 1;
	}

	.home-form /deep/.ant-calendar-picker {
		width: 100%;
	}

	/deep/.el-table th.is-leaf {
		background: #fafafa;
	}

	/deep/.el-table td,
	/deep/.el-table th {
		padding: 5px;
	}

	.option {
		margin-top: 10px;
		margin-bottom: 20px;
		overflow: hidden;

		.ant-btn {
			font-size: 12px;
		}
	}

	.el-pagination {
		margin-top: 10px;
	}

	/deep/ .ant-form-item-control-wrapper {
		min-width: 200px;
	}
</style>
d
